CSS @scroll-timeline beheersen: Animatiebesturing via scrollvoortgang

In het steeds veranderende landschap van webontwikkeling is het creëren van boeiende en interactieve gebruikerservaringen van het grootste belang. CSS biedt verschillende tools om dit te bereiken, en een van de krachtigste, maar vaak over het hoofd geziene, is de @scroll-timeline at-rule. Met deze functie kunnen ontwikkelaars animaties rechtstreeks koppelen aan de scrollvoortgang van een element, waardoor boeiende scroll-gestuurde animaties ontstaan. Dit artikel biedt een uitgebreide verkenning van @scroll-timeline, met de syntaxis, eigenschappen, praktisch gebruik en geavanceerde animatietechnieken om uw webdesigns te verbeteren.

Wat is CSS @scroll-timeline?

@scroll-timeline is een CSS at-rule die een scroll-timeline definieert, wat in wezen een reeks staten is die overeenkomen met de scrollpositie van een specifiek element. In plaats van te vertrouwen op traditionele tijdsgebonden animaties, koppelt @scroll-timeline de animatievoortgang aan de scrollactie van de gebruiker. Dit resulteert in een natuurlijkere en responsievere animatie, omdat de animatiesnelheid direct wordt bestuurd door het scrollgedrag van de gebruiker.

Dit opent spannende mogelijkheden voor:

• Visuele storytelling: Onthul inhoud geleidelijk naarmate de gebruiker scrolt.
• Interactieve gegevensvisualisatie: Animeer grafieken en diagrammen terwijl de gebruiker gegevens verkent.
• Parallax-effecten: Creëer diepte en dimensie door verschillende elementen met verschillende snelheden te animeren op basis van de scrollpositie.
• Voortgangsindicatoren: Geef de voortgang van de gebruiker door een lang document visueel weer.

Syntaxis en eigenschappen

De basissyntaxis van de @scroll-timeline at-rule is als volgt:

            @scroll-timeline timeline-name {
  source: auto | <element-selector>;
  orientation: auto | block | inline;
  scroll-offsets: <scroll-offset>[ , <scroll-offset> ]*;
}

            

              
                Copy
              
            
          

Laten we elke eigenschap opsplitsen:

timeline-name

Dit is een unieke identifier voor uw scroll-timeline. U gebruikt deze naam om naar de timeline te verwijzen bij het toepassen ervan op een animatie.

Voorbeeld:

            @scroll-timeline my-scroll-timeline {
  /* ... */
}

            

              
                Copy
              
            
          

source

Deze eigenschap specificeert het element waarvan de scrollpositie de animatie zal aansturen. Het kan twee waarden hebben:

• auto: De browser bepaalt automatisch het scrollende element. Dit is vaak de viewport van het document (het browservenster).
• <element-selector>: Een CSS-selector die het specifieke element identificeert dat moet worden gebruikt als de scrollbron. Hiermee kunt u specifieke containers of secties op uw pagina targeten.

Voorbeeld (met behulp van de viewport als bron):

            @scroll-timeline my-scroll-timeline {
  source: auto; /* Gebruikt de viewport */
  /* ... */
}

            

              
                Copy
              
            
          

Voorbeeld (met behulp van een specifiek element als bron):

            @scroll-timeline my-scroll-timeline {
  source: #scrollable-container; /* Gebruikt het element met ID "scrollable-container" */
  /* ... */
}

            

              
                Copy
              
            
          

orientation

Deze eigenschap specificeert de scrollrichting die moet worden gebruikt voor de timeline. Het bepaalt of de animatie wordt aangestuurd door verticaal of horizontaal scrollen. Het kan drie waarden hebben:

• auto: De browser bepaalt automatisch de scrollrichting op basis van de dominante scrollrichting van het bron-element.
• block: Gebruikt de blok (verticaal, in de meeste schrijfwijzen) scrollrichting.
• inline: Gebruikt de inline (horizontaal, in de meeste schrijfwijzen) scrollrichting.

Voorbeeld (met verticaal scrollen):

            @scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block; /* Verticaal scrollen */
  /* ... */
}

            

              
                Copy
              
            
          

Voorbeeld (met horizontaal scrollen):

            @scroll-timeline my-scroll-timeline {
  source: #horizontal-scroll-container;
  orientation: inline; /* Horizontaal scrollen */
  /* ... */
}

            

              
                Copy
              
            
          

scroll-offsets

Deze eigenschap definieert de scrollposities die overeenkomen met specifieke punten in de animatie. Het is een optionele eigenschap, en als deze niet is opgegeven, wordt de animatie afgespeeld van het begin tot het einde van het scrollbare gebied. Wanneer u deze gebruikt, kunt u een of meer scroll-offsets definiëren, die elk een scrollpositie en een bijbehorend punt in de voortgang van de animatie specificeren.

De syntaxis voor een <scroll-offset> is:

            <scroll-offset> = <length-percentage> [ at <length-percentage> ]

            

              
                Copy
              
            
          

Waar:

• De eerste <length-percentage> vertegenwoordigt de scrollpositie binnen het scrollbare gebied.
• De optionele at <length-percentage> vertegenwoordigt de bijbehorende animatievoortgang (0% tot 100%). Indien weggelaten, wordt de animatievoortgang gelijkmatig verdeeld over de gedefinieerde scroll-offsets.

Voorbeelden:

            /* Scrollpositie 200px komt overeen met animatievoortgang 0% */
scroll-offsets: 200px at 0%;

/* Scrollpositie op 50% van het scrollbare gebied komt overeen met animatievoortgang 50% */
scroll-offsets: 50% at 50%;

/* Meerdere offsets: */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;

/* Zonder het "at" sleutelwoord - gelijkmatig verdeelde animatievoortgang: */
scroll-offsets: 0px, 500px, 1000px; /* Equivalent aan 0px at 0%, 500px at 50%, 1000px at 100% */

            

              
                Copy
              
            
          

Belangrijke overwegingen voor scroll-offsets:

• Als u scroll-offsets specificeert, zorg er dan voor dat ze het bereik van het scrollbare gebied dekken om onverwacht animatiegedrag te voorkomen.
• De animatievoortgang wordt geïnterpoleerd tussen de gedefinieerde scroll-offsets.
• Als u geen scroll-offsets specificeert, wordt de animatievoortgang gelijkmatig verdeeld over het gehele scrollbare gebied.

De Scroll-Timeline toepassen op een animatie

Zodra u uw scroll-timeline hebt gedefinieerd, moet u deze toepassen op een CSS-animatie met behulp van de eigenschap animation-timeline.

De syntaxis is eenvoudig:

            animation-timeline: timeline-name; /* Gebruik de naam die u in @scroll-timeline hebt gedefinieerd */

            

              
                Copy
              
            
          

U moet ook een standaard CSS-animatie definiëren met behulp van @keyframes. De animatie definieert de wijzigingen in CSS-eigenschappen die zullen plaatsvinden wanneer de gebruiker scrolt. Verder wilt u ervoor zorgen dat de CSS-eigenschap `animation-range` is ingesteld. Het definieert het bereik van de scroll-timeline die de animatie activeert.

Hier is een compleet voorbeeld:

            /* Definieer de scroll-timeline */
@scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block;
}

/* Definieer de animatie */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pas de animatie en scroll-timeline toe op een element */
.animated-element {
  animation: fade-in 1s forwards;
  animation-timeline: my-scroll-timeline;
  animation-range: entry 25% cover 75%; /* entry en cover zijn trefwoordwaarden voor de start- en eindbereiken */
}

            

              
                Copy
              
            
          

In dit voorbeeld:

• De @scroll-timeline met de naam my-scroll-timeline is gedefinieerd, met behulp van de viewport als bron en verticaal scrollen als oriëntatie.
• De @keyframes met de naam fade-in definieert een eenvoudige fade-in en slide-up animatie.
• De .animated-element class heeft de fade-in animatie toegepast, maar in plaats van te worden geactiveerd door een timer, wordt deze bestuurd door de my-scroll-timeline.
• De animatie-range definieert dat de animatie moet starten wanneer de bovenrand van het element de onderste 25% van de viewport binnengaat en moet eindigen wanneer het de bovenste 25% verlaat.

Praktische voorbeelden en gebruiksscenario's

Laten we enkele praktische voorbeelden bekijken van hoe u @scroll-timeline kunt gebruiken om boeiende webervaringen te creëren.

1. Inhoud geleidelijk onthullen

Dit is een veelvoorkomend gebruiksscenario waarbij u inhoud onthult terwijl de gebruiker door de pagina scrolt. Stel u een lang artikel voor met secties die vervagen als ze in beeld komen.

HTML:

            <section class="content-section">
  <h2>Sectie 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

<section class="content-section">
  <h2>Sectie 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>

            

              
                Copy
              
            
          

CSS:

            @scroll-timeline reveal-timeline {
  source: auto;
  orientation: block;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-section {
  animation: reveal 1s forwards;
  animation-timeline: reveal-timeline;
  animation-range: entry 25% cover 75%;
}

            

              
                Copy
              
            
          

In dit voorbeeld vervaagt elke .content-section in als deze in de viewport scrolt. De `animation-range` zorgt ervoor dat de animatie begint wanneer de bovenrand van de sectie de onderste 25% van de viewport binnengaat en eindigt wanneer de sectie de bovenste 25% verlaat.

2. Parallax-effecten

Parallax-effecten creëren een gevoel van diepte door achtergrondelementen met verschillende snelheden te bewegen dan voorgrondelementen. @scroll-timeline maakt het gemakkelijk om parallax scrolling te implementeren.

HTML:

            <div class="parallax-container">
  <div class="background-element"></div>
  <div class="foreground-element">
    <h2>Parallax Sectie</h2>
    <p>Wat inhoud hier...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS:

            .parallax-container {
  position: relative;
  height: 500px; /* Aanpassen indien nodig */
  overflow: hidden;
}

.background-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Vervang met uw afbeelding */
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* Creëert het parallax-effect */
  transform-origin: top;
  pointer-events: none; /* Maakt klikken op voorgrondelementen mogelijk */

  animation: parallax-bg 1s linear forwards;
  animation-timeline: parallax-timeline;
  animation-range: 0vh 100vh;
}

.foreground-element {
  position: relative;
  z-index: 1;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}

@scroll-timeline parallax-timeline {
  source: auto;
  orientation: block;
}

@keyframes parallax-bg {
    0% { transform: translateZ(-1px) scale(2) translateY(0px); }
    100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}

            

              
                Copy
              
            
          

In dit voorbeeld wordt het .background-element achter het .foreground-element geplaatst en geschaald met behulp van transform. De animatie `parallax-bg` wordt vervolgens toegepast, waardoor de achtergrond langzamer beweegt dan de voorgrond terwijl de gebruiker scrolt, waardoor het parallax-effect ontstaat. De `animation-range` zorgt ervoor dat de animatie de gehele hoogte van de viewport (0vh tot 100vh) doorloopt.

3. Een voortgangsbalk animeren

U kunt @scroll-timeline gebruiken om een voortgangsbalk te maken die visueel de scrollvoortgang van de gebruiker door een document weergeeft.

HTML:

            <div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <!-- Uw inhoud hier -->
</div>

            

              
                Copy
              
            
          

CSS:

            .progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  animation: progress-bar-fill 1s linear forwards;
  animation-timeline: document-scroll-timeline;
}

@scroll-timeline document-scroll-timeline {
  source: auto;
  orientation: block;
}

@keyframes progress-bar-fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

            

              
                Copy
              
            
          

In dit voorbeeld wordt de breedte van de .progress-bar geanimeerd van 0% tot 100% terwijl de gebruiker door het document scrolt. De @scroll-timeline heet `document-scroll-timeline`, waardoor het duidelijk is wat het vertegenwoordigt.

Geavanceerde technieken

Zodra u de basis onder de knie heeft, kunt u enkele geavanceerde technieken verkennen om nog geavanceerdere scroll-gestuurde animaties te creëren.

1. scroll-offsets gebruiken voor precieze controle

Met de eigenschap scroll-offsets kunt u specifieke scrollposities toewijzen aan specifieke waarden voor animatievoortgang. Dit is handig als u bepaalde animatiestatus op precieze punten tijdens het scrollen wilt activeren.

            @scroll-timeline custom-timeline {
  source: #scrollable-container;
  orientation: block;
  scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}

@keyframes custom-animation {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animated-element {
  animation: custom-animation 1s forwards;
  animation-timeline: custom-timeline;
}

            

              
                Copy
              
            
          

In dit voorbeeld zal de animatie:

• Starten bij translateX(-100px) en opacity: 0 wanneer de scrollpositie 100px is.
• translateX(0) en opacity: 1 bereiken wanneer de scrollpositie 500px is.
• Eindigen bij translateX(100px) en opacity: 0 wanneer de scrollpositie 1000px is.

2. Combineren met JavaScript

Hoewel @scroll-timeline krachtige animatiebesturing biedt via CSS, kunt u deze combineren met JavaScript voor nog meer flexibiliteit. U kunt JavaScript bijvoorbeeld gebruiken om:

• Dynamisch scroll-offsets te berekenen en bij te werken op basis van de viewportgrootte of inhoudswijzigingen.
• Aanvullende JavaScript-gebaseerde effecten of interacties te activeren op basis van de scrollvoortgang.
• Fallback-oplossingen te implementeren voor browsers die @scroll-timeline niet volledig ondersteunen.

Hier is een eenvoudig voorbeeld van het gebruik van JavaScript om de scrollvoortgang te lezen en een CSS-variabele bij te werken:

            const scrollableElement = document.getElementById('scrollable-container');
const animatedElement = document.querySelector('.animated-element');

scrollableElement.addEventListener('scroll', () => {
  const scrollPosition = scrollableElement.scrollTop;
  const maxScroll = scrollableElement.scrollHeight - scrollableElement.clientHeight;
  const scrollPercentage = (scrollPosition / maxScroll) * 100;

  animatedElement.style.setProperty('--scroll-progress', scrollPercentage + '%');
});

            

              
                Copy
              
            
          

U kunt deze CSS-variabele vervolgens binnen uw animatie gebruiken:

            @keyframes custom-animation {
  0% {
    transform: translateX(calc(var(--scroll-progress) * -1px));
  }
  100% {
    transform: translateX(calc(var(--scroll-progress) * 1px));
  }
}

.animated-element {
  --scroll-progress: 0%; /* Initiële waarde */
  animation: custom-animation 1s linear forwards;
  animation-timeline: scroll-driven-timeline;
}

            

              
                Copy
              
            
          

3. Verschillende easing-functies benutten

Hoewel animation-timing-function niet rechtstreeks van toepassing is op de scroll-timeline zelf (omdat de timeline wordt aangestuurd door scrollvoortgang, niet door tijd), kunt u nog steeds easing-functies gebruiken binnen uw @keyframes om de snelheid en het ritme van de animatie in verschillende fasen te regelen. Experimenteer met verschillende easing-functies zoals ease-in, ease-out, ease-in-out, of zelfs aangepaste cubic bezier-curves om het gewenste effect te bereiken.

Browsercompatibiliteit en fallbacks

Eind 2023 geniet @scroll-timeline van relatief goede browserondersteuning in moderne browsers zoals Chrome, Edge, Firefox en Safari. Het is echter essentieel om de huidige compatibiliteitsstatus te controleren op websites zoals Can I use... voordat u deze in productie implementeert.

Voor browsers die @scroll-timeline niet ondersteunen, kunt u een fallback aanbieden met behulp van traditionele JavaScript-gebaseerde scroll-event listeners en animatiebibliotheken zoals GSAP (GreenSock Animation Platform) of Anime.js. U kunt ook CSS-feature queries (@supports) gebruiken om voorwaardelijk de @scroll-timeline-gebaseerde animaties of de JavaScript-gebaseerde fallbacks toe te passen.

            @supports (animation-timeline: scroll()) {
  /* @scroll-timeline-gebaseerde animaties toepassen */
  .animated-element {
    animation: fade-in 1s forwards;
    animation-timeline: my-scroll-timeline;
  }
} @else {
  /* JavaScript-gebaseerde fallback toepassen */
  .animated-element {
    /* Initieel verbergen */
    opacity: 0;
  }

  /* (JavaScript code om scroll te detecteren en opacity toe te passen) */
}

            

              
                Copy
              
            
          

Toegankelijkheidsoverwegingen

Bij het gebruik van @scroll-timeline of een animatietechniek is het cruciaal om rekening te houden met toegankelijkheid. Zorg ervoor dat uw animaties niet veroorzaken:

• Aanvallen: Vermijd flitsende of snel veranderende animaties.
• Afleiding: Bied gebruikers een manier om animaties te pauzeren of uit te schakelen, vooral als ze langdurig of storend zijn.
• Cognitieve overbelasting: Gebruik animaties spaarzaam en zorg ervoor dat ze een duidelijk doel dienen, in plaats van puur decoratief te zijn.
• Bewegingsziekte: Houd rekening met parallax-effecten, omdat deze bij sommige gebruikers bewegingsziekte kunnen veroorzaken.

Overweeg om alternatieve manieren te bieden om toegang te krijgen tot de informatie die via animaties wordt gepresenteerd, zoals statische inhoud of beschrijvende tekst. Gebruik ARIA-attributen om semantische betekenis en context te bieden aan ondersteunende technologieën.

Beste praktijken

Hier zijn enkele best practices om in gedachten te houden bij het werken met @scroll-timeline:

• Gebruik beschrijvende timelinenamen: Kies timelinenamen die duidelijk hun doel aangeven (bijv. parallax-background-timeline, reveal-section-timeline).
• Houd animaties performant: Optimaliseer uw animaties om prestatieknelpunten te voorkomen. Gebruik waar mogelijk hardwareversnelde CSS-eigenschappen zoals transform en opacity.
• Grondig testen: Test uw animaties op verschillende apparaten en browsers om ervoor te zorgen dat ze werken zoals verwacht en geen problemen met toegankelijkheid of prestaties veroorzaken.
• Begin eenvoudig: Begin met eenvoudige animaties en voeg geleidelijk complexiteit toe naarmate u meer ervaring opdoet.
• Houd rekening met de gebruikerservaring: Zorg ervoor dat uw animaties de gebruikerservaring verbeteren, niet verminderen. Vermijd overdreven complexe of storende animaties.
• Gebruik de CSS-eigenschap `animation-range`: Zorg ervoor dat animaties alleen worden geactiveerd wanneer een element zich in de viewport bevindt voor een soepele en voorspelbare ervaring.

Conclusie

@scroll-timeline is een krachtige CSS-functie waarmee ontwikkelaars boeiende en interactieve scroll-gestuurde animaties kunnen creëren. Door animaties te koppelen aan het scrollgedrag van de gebruiker, kunt u natuurlijkere en responsievere webervaringen creëren. Door de syntaxis, eigenschappen en geavanceerde technieken te begrijpen, kunt u @scroll-timeline gebruiken om uw webdesigns te verbeteren en boeiende gebruikersreizen te creëren. Vergeet niet om rekening te houden met browsercompatibiliteit, toegankelijkheid en prestaties bij het implementeren van @scroll-timeline, en geef altijd prioriteit aan de gebruikerservaring.